<template>
	<view>
		<view v-if="showTopNav">
			<cu-custom :bgColor="'bg-white'" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">详情</block>
			</cu-custom>
		</view>

		<image src="../../static/images/back.png" mode="aspectFill" class="fixed-back" @tap="gobak()"></image>

		<image :src="thumb" mode="aspectFill" style="width: 100%;"></image>

		<view class="margin-top margin fixed-bg0">
			<text class="text-bold text-xxl">{{title}}</text>
		</view>
		<view class="u-skeleton">



			<view class="text-gray text-sm padding text-bold">
				<text class="cuIcon-file margin-lr-xs"></text>{{category.name}}
				<text class="cuIcon-attentionfill margin-lr-xs"></text> {{post_hits}}
				<text class="cuIcon-appreciatefill margin-lr-xs"></text> {{post_favorites}}
				<!-- <text class="cuIcon-messagefill margin-lr-xs"></text> 30 -->
			</view>







			<view class="margin">
				
				
				<view style="background-color: #f9f9f9;" class="u-p-20 u-m-t-20" v-if="is_videoad">
					<view class="u-p-b-20">隐藏内容，观看视频后阅读</view>
					<u-line  />
					<view class="text-gray">
						点击下方按钮，观看视频，即可阅读全文
					</view>
					<view class="u-p-t-20"><u-button @click="rewardedVideoAd" type="primary" size="medium" shape="square">立即观看</u-button></view>
				</view>
				
				<mp-html :content="content" v-if="!is_videoad" />
				


			</view>

			<view class="padding bg-white solid-bottom">
				<view class='cu-tag text-blue bg-white text-bold' v-for="(item,index) in tags" :key="index">#{{item}}
				</view>
			</view>


			<!-- 文章列表 -->
			<view class="flex justify-between margin-top margin-lr">
				<view class="text-bold text-lg">
					<view><span class="text-red">猜</span>你喜欢的</view>
					<view class="text-gray text-sm">you like</view>
				</view>
				
			</view>

			<view class="flex justify-between flex-wrap margin-bottom margin">
				<view v-for="(item,index) in youlike" class="margin-xs" @tap="goDetail" :data-id="item.id">
					<image :src="item.thumb" mode="aspectFill" class="radius" style="width: 320rpx;height: 200rpx;">
					</image>
					<view class="padding-tb-sm text-cut" style="width: 310rpx;">{{item.title}}</view>
				</view>

			</view>











		</view>
		<!-- 加载 -->
		<maoeu-loading ref="loading"></maoeu-loading>
	</view>
</template>

<script>
	import mpHtml from '@/components/mp-html/mp-html'
	export default {
		components: {
			mpHtml
		},
		data() {
			return {
				id: 0,
				is_videoad: false,
				loading: true,
				showTopNav: false,
				showempty: false,
				showloading: true,
				full_image_url: '',
				postTime: '',
				category: {},
				title: '',
				intro: '',
				thumb: '',
				content: '',
				tags: [],
				list: [],
				youlike: [],
				showHeight: 100,
				toggle: false,
				//设置默认的分享参数
				share: {
					
				},
				post_hits:0,
				post_favorites:0,
				post_like:0
				




			}
		},
		components: {

		},
		onReady() {

		},
		onLoad(options) {
			console.log(options)
			if (options.scene) {
				let id = options.scene
				this.id = id;
				this.detail(id);
			} else {
				let id = options.id
				this.id = id;
				this.detail(id);
			}




		},
		onPageScroll(res) {
			this.top = res.scrollTop;
			console.log(res)
			if (this.top > 88) {
				this.showTopNav = true;
			} else {
				this.showTopNav = false;
			}

		},
	
		methods: {

			goDetail: function(e) {
				console.log(999)
				let id = e.currentTarget.dataset.id
				uni.navigateTo({
					url: '../detail/detail?id=' + id
				})

			},
			shareData(){
				this.share = {
					title: this.title,
					path: '/pages/detail/detail?id='+this.id,
					imageUrl: this.thumb,
					desc: '',
					content: ''
				}
			},
			poster: function() {

				this.getPoster()
			},
			gobak() {
				uni.navigateBack({

				})
			},
			getYoulike: function() {

				const _this = this;
				_this.$apiResquest({
					url: 'cms/post/youlike',
					method: 'GET'
				}).then(function(res) {


					_this.youlike = res.data


				})
			},
			detail: function(id) {
				const _this = this;
				_this.$apiResquest({
					url: 'cms/post/detail',
					query: {
						id
					},
					method: 'GET'
				}).then(function(res) {

					console.log(res);
					_this.title = res.data.title
					_this.intro = res.data.intro
					_this.is_videoad = res.data.is_videoad
					_this.tags = res.data.tag
					_this.thumb = res.data.thumb
					_this.category = res.data.category
					_this.content = res.data.content;
					
					_this.post_favorites = res.data.post_favorites
					_this.post_hits = res.data.post_hits
					_this.post_like = res.data.post_like

					_this.getYoulike()
					_this.$refs.loading.closeLoading()
					_this.shareData()

				})

			},
			/* 
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText(html) {
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			},
			copyWx: function() {
				uni.request({
					url: BASE_API + 'dengje-minprogram/v1/common/config',
					data: {
						key: 'wx'
					},
					method: "GET",
					success(res) {
						uni.setClipboardData({
							data: res.data,
							success: function() {
								uni.showToast({
									title: '已复制微信号',
									duration: 2000
								});
							}
						})

					}
				})


			},
			goHome: function() {
				uni.reLaunch({
					url: '../index/index'
				})
			},
			
			posterSuccess(res) {

				let _this = this;
				_this.posterPath = res
				// 预览图片
				uni.previewImage({
					urls: [_this.posterPath],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
				uni.hideLoading()
			},
			posterError(err) {
				console.log('err', err)
			},
			// 创建激励视频广告
			rewardedVideoAd() {
				const _this = this;
				// 在页面中定义激励视频广告
				let videoAd = null
				
				uni.showLoading({
					title:'加载中...'
				})

				// 在页面onLoad回调事件中创建激励视频广告实例
				if (wx.createRewardedVideoAd) {
					videoAd = wx.createRewardedVideoAd({
						adUnitId: _this.CmsConfig.rewarded_video_ad
					})
					videoAd.onLoad(() => {
						uni.hideLoading()
					})
					videoAd.onError((err) => {})
					videoAd.onClose((res) => {
						if (res && res.isEnded || res === undefined) {
						            //这里写广告播放完成后的事件
									_this.is_videoad = false;
						        } else {
									uni.showToast({
										title:'视频没有看完，暂不能查看全文！',
										icon:'error'
									})
								}
						      
					})
				}
			
				// 用户触发广告后，显示激励视频广告
				if (videoAd) {
					videoAd.show().catch(() => {
						// 失败重试
						videoAd.load()
							.then(() => videoAd.show())
							.catch(err => {
								console.log('激励视频 广告显示失败')
							})
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	body {
		background-color: #FFFFFF;

	}

	.fixed-back {
		position: absolute;
		top: 54px;
		left: 9px;
		z-index: 9999;
		width: 50rpx;
		height: 50rpx;
		background: #fff;
		border-radius: 100%;
	}

	.fixed-bg {
		position: absolute;
		top: 151px;
		color: #fff;
	}

	.rich-box {
		letter-spacing: 2px;
		font-size: 28upx;
		color: #333232;
		line-height: 60upx;
		margin-bottom: 100px;

	}



	.footer {
		position: fixed;
		bottom: 0px;
		display: flex;
		justify-content: space-around;
		width: 100%;
		background-color: #FFFFFF;

		padding-bottom: env(safe-area-inset-bottom);

		.footer-item {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 15px 0;

			text {
				font-size: 1.2rem;
			}

			button {
				background-color: #FFFFFF;
			}

			button::after {

				border: 0;

			}
		}
	}
</style>
